<template>
  <!-- 工作经历 -->
  <view class="box">
    <view class="head">
      <view class="title">
        <image
          class="fanhui"
          @click.stop="fanhui"
          src="https://pic.bangbangtongcheng.com/static/bbzc/left-btn.png"
          mode=""
        >
        </image>
        <view class="title-text">工作经历</view>
      </view>
    </view>

    <view class="hide-switch" v-show="gzjlData.corporateName">
      <span style="margin: 0 10rpx 0 20rpx">对这家公司隐藏我的信息</span>
      <u-switch
        v-model="gzjlData.onlyHide"
        activeColor="#0FA291"
        size="20"
        @change="switchChange"
      ></u-switch>
    </view>

    <view class="center">
      <view class="center_item">
        <span style="color: red">*</span><span class="center_item_span">公司名称</span>
        <textarea
          auto-height
          maxlength="30"
          class="textarea"
          v-model="gzjlData.corporateName"
          placeholder="请填写公司名称"
          placeholderStyle="color:#CCCCCC"
          style="width: 500rpx; font-size: 28rpx"
        />
      </view>
      <view class="center_item">
        <span class="center_item_span" style="padding-left: 10rpx">当时薪资</span>
        <picker
          v-if="salaryExp.length > 0"
          @change="salaryExpChange"
          mode="selector"
          :value="salaryIndex"
          :range="salaryExp"
          range-key="valueName"
        >
          <view style="width: 400rpx">
            {{ salaryText }}
          </view>
        </picker>
      </view>

      <view class="center_item" style="border-bottom: none">
        <span class="center_item_span" style="padding-left: 10rpx">在职时间</span>
        <picker mode="date" v-model="startTime" fields="month" @change="changeStartTime">
          <view style="width: 200rpx; text-align: center">
            <span v-if="startTime">{{ startTime }}</span>
            <!-- <span v-else class="placeholder">开始时间</span> -->
          </view>
        </picker>
        至
        <picker
          mode="date"
          v-model="endTime"
          fields="month"
          @change="changeEndTime"
          :end="currentMonth"
        >
          <view style="width: 200rpx; text-align: center">
            <span v-if="endTime">{{ endTime }}</span>
            <!-- <span v-else class="placeholder">结束时间</span> -->
          </view>
        </picker>
      </view>
    </view>
    <view class="step-btn" @click.stop="submit">
      <span></span>
      下一步：你在此公司的职位
      <img
        class="arrow-right-white"
        src="https://pic.bangbangtongcheng.com/static/bbzc/arrow-right-white.png"
        alt=""
      />
    </view>
  </view>
</template>
<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  //#ifdef H5
  import wxshare from '@/utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  import gppDatePicker from '@/components/gpp-datePicker/gpp-datePicker.vue'
  import { getTimes, formatDateAdjusted } from '@/util/dateTimePicker.js'

  export default {
    data() {
      const date = new Date()
      const YearIndex = date.getFullYear() - 2020
      console.log('YearIndex', YearIndex)

      return {
        userInfo: uni.getStorageSync('Pduser'),
        WXwidth: '',
        // 工作经历数据
        gzjlData: {
          onlyHide: true,
          corporateName: '',
          onJobTime: '',
          positionName: '',
          industry: '',
          jobContent: '',
          salaryRange: '',
        },
        // 工作时间年，月
        workHours: [],
        workHours_month: [],
        workHours2: [],
        workHours2_month: [],
        dateIndex1: [YearIndex, 5],
        dateIndex2: [0, 0],
        pickerInitR1: 0,
        pickerInitR2: 0,

        startTime: '2020-01',
        endTime: getTimes().slice(0, 7),
        currentMonth: getTimes().slice(0, 7), //当前年月
        // startTimeText: '',
        // endTimeText: '',

        // 入职时间
        dateEntry: '',
        timeResignation: '',
        // 薪资范围
        minimumWage: '',
        maximumSalary: '',
        index: '',
        salaryExp: [],
        salaryIndex: 4,
        salaryText: '5001-8000元',
      }
    },
    async onLoad(option) {
      var than = this
      // 获取微信小程序胶囊和据右边宽度
      // #ifdef MP-WEIXIN
      // 获取胶囊信息
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      let getWindowInfo = uni.getWindowInfo().screenWidth
      this.WXwidth = getWindowInfo - (menuButtonInfo.right - menuButtonInfo.width)
      // #endif
      await this.getTime()
      await this.getDictionaryList()
      if (option.index) {
        this.index = option.index
        this.gzjlData = uni.getStorageSync('gzjl_key')
        uni.removeStorageSync('gzjl_key')
      }
      this.init()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    computed: {
      ...mapGetters(['userid', 'islogin', 'statusBarHeight1', 'userinfo']),
    },
    methods: {
      init() {
        let curriculumVitae = uni.getStorageSync('curriculumVitae')
        if (curriculumVitae && curriculumVitae.workExperience) {
          this.gzjlData = JSON.parse(curriculumVitae.workExperience)[0]
          console.log('gzjlData', this.gzjlData)
          let onJobTime = this.gzjlData.onJobTime.split('|')
          this.dateEntry = onJobTime[0]
          this.timeResignation = onJobTime[1]
        }
      },
      // 隐藏
      switchChange: function (e) {
        this.gzjlData.onlyHide = e
      },
      // 获取当时薪资列表
      getDictionaryList(e) {
        this.$myRequest
          .get('/api/mobile/personnelOwner/queryDataDictionaryList', {
            type: 10,
          })
          .then((res) => {
            this.salaryExp = res.dataDictionaryList
          })
      },
      // 选择当时薪资
      salaryExpChange(e) {
        console.log('e', e)
        this.salaryIndex = e.detail.value
        this.salaryText = this.salaryExp[e.detail.value].valueName
      },
      //获取当前日期
      getTime() {
        let myDate = new Date()
        const year = myDate.getFullYear()
        let month = myDate.getMonth() + 1
        let yearArr = []
        let monthArr = []
        for (var i = 1990; i <= year; i++) {
          yearArr.unshift(i)
          let j = i == year ? month : '12'
          let months_arr = []
          for (let s = 1; s <= j; s++) {
            months_arr.unshift(s)
          }
          monthArr.unshift(months_arr)
        }
        this.workHours.push(yearArr)
        this.workHours.push(monthArr[0])
        this.workHours_month = monthArr
        let yearArrs = JSON.parse(JSON.stringify(yearArr))
        let monthArrs = JSON.parse(JSON.stringify(monthArr))
        yearArrs.unshift('至今')
        monthArrs.unshift(['至今'])
        this.workHours2.push(yearArrs)
        this.workHours2.push(monthArrs[0])
        this.workHours2_month = monthArrs
      },

      // 选择培训开始时间
      changeStartTime(e) {
        console.log('startTime', e.detail.value)
        if (this.endTime && this.endTime < e.detail.value) {
          uni.showToast({
            title: '开始时间不能大于结束时间',
            icon: 'none',
            mask: true,
          })
          return
        }
        this.startTime = e.detail.value
        // this.startTimeText = formatDateAdjusted(e.detail.value)
      },
      // 选择培训结束时间
      changeEndTime(e) {
        console.log('endTime===', e.detail.value)
        console.log('changeEndTime---', this.currentMonth)
        if (this.startTime && this.startTime > e.detail.value) {
          uni.showToast({
            title: '开始时间不能大于结束时间',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (this.currentMonth == e.detail.value) {
          this.endTime = '至今'
          return
        }
        this.endTime = e.detail.value
        // this.endTimeText = formatDateAdjusted(e.detail.value)
      },

      pickerColumnDept1(e) {
        if (e.detail.column == 0) {
          let arr = []
          arr = this.workHours_month[e.detail.value]
          this.$set(this.workHours, 1, arr)
          this.dateIndex1[0] = e.detail.value
          this.dateIndex1[1] = this.pickerInitR1
          let timern = setTimeout(() => {
            this.dateIndex1[1] = 0
            clearTimeout(timern)
          }, 100)
        } else {
          this.pickerInitR1 = e.detail.value
          this.dateIndex1[1] = e.detail.value
        }
      },
      pickerColumnDept2(e) {
        if (e.detail.column == 0) {
          let arr = []
          arr = this.workHours2_month[e.detail.value]
          this.$set(this.workHours2, 1, arr)
          this.dateIndex2[0] = e.detail.value
          this.dateIndex2[1] = this.pickerInitR2
          let timern = setTimeout(() => {
            this.dateIndex2[1] = 0
            clearTimeout(timern)
          }, 100)
        } else {
          this.pickerInitR2 = e.detail.value
          this.dateIndex2[1] = e.detail.value
        }
      },
      dateChange1(e) {
        if (this.timeResignation && this.timeResignation != '至今') {
          let year = this.timeResignation.split('.')[0]
          let month = this.timeResignation.split('.')[1]
          if (year < this.workHours[0][this.dateIndex1[0]]) {
            uni.showToast({
              title: '入职时间不能大于离职时间',
              icon: 'none',
              mask: true,
            })
            return
          } else if (year == this.workHours[0][this.dateIndex1[0]]) {
            if (month < this.workHours[1][this.dateIndex1[1]]) {
              uni.showToast({
                title: '入职时间不能大于离职时间',
                icon: 'none',
                mask: true,
              })
              return
            }
          }
        }
        this.dateIndex1 = e.target.value
        this.dateEntry = `${this.workHours[0][this.dateIndex1[0]]}.${
          this.workHours[1][this.dateIndex1[1]]
        }`
      },
      dateChange2(e) {
        if (this.dateEntry) {
          if (this.workHours2[0][this.dateIndex2[0]] != '至今') {
            let year = this.dateEntry.split('.')[0]
            let month = this.dateEntry.split('.')[1]
            if (year > this.workHours2[0][this.dateIndex2[0]]) {
              uni.showToast({
                title: '入职时间不能大于离职时间',
                icon: 'none',
                mask: true,
              })
              return
            } else if (year == this.workHours2[0][this.dateIndex2[0]]) {
              if (month > this.workHours2[1][this.dateIndex2[1]]) {
                uni.showToast({
                  title: '入职时间不能大于离职时间',
                  icon: 'none',
                  mask: true,
                })
                return
              }
            }
          }
        }
        this.dateIndex2 = e.target.value
        if (this.workHours2[0][this.dateIndex2[0]] == '至今') {
          this.timeResignation = '至今'
        } else {
          this.timeResignation = `${this.workHours2[0][this.dateIndex2[0]]}.${
            this.workHours2[1][this.dateIndex2[1]]
          }`
        }
      },
      // 金额校验
      inputChage1(e) {
        let length = 7
        // 数值中转
        let temp = e.target.value
        //  正则限制 3.. 以及 3.3.3的情况
        if (temp) {
          temp = temp
            .replace(/[^0-9.]|^\.|\.{2,}/g, '')
            .replace('.', '$#$')
            .replace(/\./g, '')
            .replace('$#$', '.')
          const point = temp.split('.')
          let decimals // 整数部分
          let positiveInteger // 小数部分
          // 先处理整数部分
          if (point[0]) {
            decimals = point[0].length > length ? point[0].slice(0, length) : point[0]
          }
          if (point[0].length > 1 && point[0].slice(0, 1) == '0') {
            decimals = point[0].slice(1, 2)
          }
          //  处理小数部分
          if (temp.includes('.')) {
            positiveInteger = point[1].length > 2 ? point[1].slice(0, 2) : point[1]
            temp = positiveInteger ? `${decimals}.${positiveInteger}` : `${decimals}.`
          } else {
            temp = decimals
          }
        }
        this.$nextTick(function () {
          this.minimumWage = temp
        })
      },
      inputChage2(e) {
        let length = 7
        // 数值中转
        let temp = e.target.value
        //  正则限制 3.. 以及 3.3.3的情况
        if (temp) {
          temp = temp
            .replace(/[^0-9.]|^\.|\.{2,}/g, '')
            .replace('.', '$#$')
            .replace(/\./g, '')
            .replace('$#$', '.')
          const point = temp.split('.')
          let decimals // 整数部分
          let positiveInteger // 小数部分
          // 先处理整数部分
          if (point[0]) {
            decimals = point[0].length > length ? point[0].slice(0, length) : point[0]
          }
          if (point[0].length > 1 && point[0].slice(0, 1) == '0') {
            decimals = point[0].slice(1, 2)
          }
          //  处理小数部分
          if (temp.includes('.')) {
            positiveInteger = point[1].length > 2 ? point[1].slice(0, 2) : point[1]
            temp = positiveInteger ? `${decimals}.${positiveInteger}` : `${decimals}.`
          } else {
            temp = decimals
          }
        }
        this.$nextTick(function () {
          this.maximumSalary = temp
        })
      },
      // 返回
      fanhui(index) {
        uni.navigateTo({
          url: '/pages_recruitMoney/publish/writeResume?stepStatus=3',
        })
        // if (this.index) {
        // 	let pages = getCurrentPages();
        // 	let prevPage = pages[pages.length - 2];
        // 	this.$set(prevPage.$vm.workExperienceList, this.index, this.gzjlData)
        // } else {
        // 	let pages = getCurrentPages();
        // 	let prevPage = pages[pages.length - 2];
        // 	prevPage.$vm.workExperienceList.push(this.gzjlData)
        // }
      },
      // 提交
      submit() {
        if (this.gzjlData.corporateName == '') {
          uni.showToast({
            title: '请填写公司名称',
            icon: 'none',
            mask: true,
          })
          return
        }

        this.gzjlData.onJobTime = this.startTime + '|' + this.endTime
        this.gzjlData.salaryRange = this.salaryText
        let curriculumVitae = uni.getStorageSync('curriculumVitae')
        const newCurriculumVitae = {
          ...curriculumVitae,
          ...{
            workExperience: JSON.stringify([this.gzjlData]),
          },
        }
        // 出生年份
        if (newCurriculumVitae.dateBirth) {
          let len = newCurriculumVitae.dateBirth.length
          if (len == 4) {
            newCurriculumVitae.dateBirth = `${curriculumVitae.dateBirth}-01-01`
          }
        }
        // 参加工作时间
        if (newCurriculumVitae.workingTime) {
          let len = newCurriculumVitae.workingTime.length
          if (len == 4) {
            newCurriculumVitae.workingTime = `${curriculumVitae.workingTime}-01-01`
          }
        }

        uni.setStorageSync('curriculumVitae', newCurriculumVitae)
        console.log('this.gzjlData', this.gzjlData)
        uni.navigateTo({
          url: '/pages_recruitMoney/recruitmentInformation/selectPositionCategoryResume?origin=2',
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  .box {
    padding-top: 100rpx;
    width: 100%;
    min-height: 100vh;
    background: #f5f7f9;
  }

  .head {
    padding: 20rpx;
    width: 100%;
    height: 100rpx;

    .title {
      display: flex;
      justify-content: start;
      align-items: center;
      width: 100%;
      height: 60rpx;
    }

    .fanhui {
      width: 30rpx;
      height: 30rpx;
    }

    .title-text {
      margin-left: 10rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #000;
    }

    .head_right {
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .hide-switch {
    padding: 25rpx 0 24rpx 0;
    display: flex;
    align-items: center;
    width: 100%;
    font-weight: 400;
    color: #666;
  }

  .center {
    margin: 0 auto;
    padding: 30rpx 20rpx;
    width: 710rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .center_items {
      height: 97rpx;
      width: 670rpx;
      align-items: center;
      border-bottom: 1px solid #e0e0e0;
      position: relative;

      /deep/ uni-picker {
        flex: 1;
      }

      .center_item_span {
        font-size: 34rpx;
        font-weight: 600;
        color: #000000;
        margin-right: 40rpx;
        margin-left: 22rpx;
        margin-bottom: 20rpx;
      }

      .input {
        flex: 1;
        font-size: 34rpx;
        color: #333333;
        margin-right: 70rpx;
      }

      .kuang {
        position: relative;
        flex: 1;
        min-height: 160rpx;
        padding-bottom: 60rpx;
        background-color: #fff;
        border: 1px solid #e0e0e0;

        textarea {
          width: 100%;
          padding-left: 24rpx;
          padding-top: 14rpx;
          line-height: 50rpx;
          letter-spacing: 2rpx;
          font-size: 28rpx;
        }

        p {
          position: absolute;
          bottom: 20rpx;
          right: 20rpx;
          color: #999999;
        }
      }

      .image {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }

    .center_item {
      height: 97rpx;
      width: 670rpx;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e0e0e0;
      position: relative;

      /deep/ uni-picker {
        flex: 1;
      }

      .heixian {
        // width: 40rpx;
        // height: 2px;
        // background-color: #000;
        margin-right: 100rpx;
      }

      .salary {
        flex: 1;
        display: flex;
        align-items: center;
        padding-right: 40rpx;

        .salary_input {
          width: 150rpx;
          height: 60rpx;
          padding: 10rpx;
          border-radius: 8rpx;
          border: 1px solid #999999;
        }

        .salary_span {
          font-size: 34rpx;
          font-weight: normal;
          color: #333333;
          margin: 0 14rpx;
        }
      }

      .center_item_span {
        font-size: 28rpx;
        color: #333;
        margin-right: 40rpx;
        // margin-left: 22rpx;
      }

      .image_yjt {
        width: 48rpx;
        height: 48rpx;
      }

      .input {
        flex: 1;
        font-size: 28rpx;
        color: #333333;
        margin-right: 70rpx;
      }

      .kuang {
        position: relative;
        flex: 1;
        min-height: 160rpx;
        margin: 0 40rpx;
        padding-bottom: 40rpx;
        background-color: #fff;
        border: 1px solid #c9c9c9;

        textarea {
          width: 100%;
          padding-left: 24rpx;
          padding-top: 14rpx;
          line-height: 50rpx;
          letter-spacing: 2rpx;
          font-size: 28rpx;
        }

        p {
          position: absolute;
          bottom: 20rpx;
          right: 20rpx;
          color: #999999;
        }
      }

      .image {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 80rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 710rpx;
    height: 100rpx;
    background-color: #0fa291;
    border-radius: 50rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step-btn {
    position: fixed;
    bottom: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 20rpx;
    width: 710rpx;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #fff;
    background: #0fa291;
    border-radius: 50rpx;

    .arrow-right-white {
      width: 28rpx;
      height: 28rpx;
    }
  }
</style>
